<script setup lang="ts">
import { Lock, User } from "@element-plus/icons-vue";
import { useLogin } from "@/hooks/useLogin";
const {
  loginForm,
  loginFormRef,
  isInLogin,
  rules,
  login,
  register,
  formChange,
} = useLogin();
</script>
<template>
  <div class="loginBox">
    <div class="left">
      <img src="../../static/image/logo.png" alt="" />
      <h1>嘉应学生荟</h1>
    </div>
    <div class="right">
      <el-card class="loginForm" v-if="isInLogin">
        <h2>用户登录</h2>
        <el-form
          width="500px"
          ref="loginFormRef"
          :model="loginForm"
          :rules="rules"
        >
          <el-form-item prop="username">
            <el-input
              placeholder="请输入用户名"
              type="text"
              :prefix-icon="User"
              v-model="loginForm.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              placeholder="请输入密码"
              type="password"
              :prefix-icon="Lock"
              v-model="loginForm.password"
            ></el-input>
          </el-form-item>

          <el-button type="primary" style="width: 100%" @click="login">{{
            "登录"
          }}</el-button>
        </el-form>
        <div class="bthResgister" @click="formChange">新用户注册</div>
      </el-card>
      <el-card class="registerForm" v-else>
        <h2>用户注册</h2>
        <el-form
          width="500px"
          ref="loginFormRef"
          :model="loginForm"
          :rules="rules"
        >
          <el-form-item prop="username">
            <el-input
              placeholder="请输入用户名"
              type="text"
              :prefix-icon="User"
              v-model="loginForm.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              placeholder="请输入密码"
              type="password"
              :prefix-icon="Lock"
              v-model="loginForm.password"
            ></el-input>
          </el-form-item>
          <el-button type="primary" style="width: 100%" @click="register">{{
            "注册"
          }}</el-button>
        </el-form>
        <div class="bthLogin" @click="formChange">去登录</div>
      </el-card>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.loginBox {
  display: flex;
  background: linear-gradient(147deg, #e7dff2 0%, #c5e5ee 100%);
  .left {
    width: 50%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    img {
      width: 50%;
      height: 50%;
    }
  }

  .right {
    width: 50%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .loginForm,
    .registerForm {
      width: 500px;
      height: 500px;
      border-radius: 10px;
      background-color: #fff;
      padding: 110px 65px;
      text-align: center;

      h2 {
        margin-bottom: 10px;
      }

      .bthResgister,
      .bthLogin {
        text-align: left;
        font-size: 12px;
        color: #1783e0;
        margin-top: 10px;
        cursor: pointer;
      }
    }
  }
}
</style>
